<template>
	<view>
		<view class="updateTodolist" v-show="update">
			<view class="input-wrapper">
				<input type="text" placeholder="请输入新的待办信息" v-model="newTodo">
				<view class="newTodo-button">
					<view class='bar'></view>
					<button @click="ok" class="yes-button">确认</button>
					<button @click="update=false" class="close-button">取消</button>
				</view>
			</view>
		</view>
		<view class="home-todolist-wrapper" v-for="(item,index) in todolist" :key="index">
			<view class="home-todo-wrap" @click="updateTodo(index)">
				<view class="home-todolist-date">
					{{item.date}}
				</view>
				<view class="home-todolist-content">
					{{item.note}}
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		created() {
			this.$store.commit('getTodolist')
		},
		data() {
			return {
				update: false,
				newTodo: '',
				index: ''
			}
		},
		computed: {
			todolist() {
				return this.$store.getters.setTodolist
			},
		},
		methods: {
			ok() {
				let payload = {
					index: this.index,
					newTodo: this.newTodo
				}
				this.$store.commit('setTodolist', payload)
				this.update = false;
				uni.showToast({
					title: '修改成功'
				})
				this.newTodo = ''
				this.index = ''

			},
			updateTodo(index) {
				this.index = index;
				this.update = true
			}
		}
	}
</script>

<style lang="scss">
	.home-todolist-wrapper {
		display: flex;
		border-radius: 5px;
		box-shadow: 1px 1px 2px 2px rgb(201, 199, 199);
		justify-content: space-between;
		align-items: center;
		padding: 10px;
		margin: 15px;
		background: #eeeef1;

		>.home-todo-wrap {
			overflow: auto;
			max-height: 80px;
			flex-grow: 1;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			background: #eeeef1;
			margin: 0px 10px;

			>.home-todolist-content {
				margin-left: 10px;
			}

			>.home-todolist-date {
				flex-wrap: nowrap;
			}
		}
	}

	.updateTodolist {
		position: fixed;
		z-index: 100;
		width: 100vw;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		background: rgba(122, 119, 119, 0.5);

		>.input-wrapper {
			background: white;
			padding: 10px;
			border-radius: 5px;

			>input {
				padding: 5px;
				font-size: 14px;
				width: 450rpx;
			}

			>.newTodo-button {
				margin-top: 10px;
				display: flex;

				>.bar {
					flex-grow: 1;
				}

				>.yes-button,
				.close-button {
					padding: 5px 10px;
					border-radius: 8px;
					background: rgb(59, 85, 71);
					color: #f3f3f3;
					font-size: 14px;
					box-shadow: 1px 1px 2px 1px #b6b6b6;
				}

				>.close-button {
					background: #f3f3f3;
					color: black;
					margin-left: 10px;
				}
			}
		}

	}
</style>
